<template>
    <div>
      <nav-header></nav-header>
      <div class="container">
        <div class="page-title-normal">
          <h2 class="page-title-h2"><span>check out</span></h2>
        </div>
        <!-- 进度条 -->
        <div class="check-step">
          <ul>
            <li class="cur"><span>Confirm</span> address</li>
            <li class="cur"><span>View your</span> order</li>
            <li class="cur"><span>Make</span> payment</li>
            <li class="cur"><span>Order</span> confirmation</li>
          </ul>
        </div>

        <div class="order-create">
          <div class="order-create-pic"><img src="/static/ok-2.png" alt=""></div>
          <div class="order-create-main">
            <h3>恭喜! <br>你的订单正在处理中!</h3>
            <p>
              <span>订单 ID：{{orderId}}</span>
              <span>订单总金额：{{orderTotal | currency('￥')}}</span>
            </p>
            <div class="order-create-btn-wrap">
              <div class="btn-l-wrap">
                <router-link to="/cart" class="btn btn--m">购物车列表</router-link>
              </div>
              <div class="btn-r-wrap">
                <router-link to="/" class="btn btn--m">商品列表</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <nav-footer></nav-footer>
    </div>
</template>
<script>
// 头部
import NavHeader from '@/components/NavHeader.vue'
// footer
import NavFooter from '@/components/NavFooter.vue'
// 面包屑
import NavBread from '@/components/NavBread.vue'
// axios
import axios from 'axios'
export default{
  data(){
    return{
      // 订单id
      orderId: '',
      // 订单总金额
      orderTotal: 0
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread
  },
  mounted() {
    var orderId = this.$route.query.orderId;
    if(!orderId) {
      return;
    }

    /**
     * 获取订单基本信息
     *  get请求需要添加params
     *  post请求直接带参数
     */
    axios.get('/users/orderDetail', {
      params: {
        orderId: orderId
      }
    }).then((response) => {
      let res = response.data;
      if(res.status == '0') {
        this.orderId = orderId;
        this.orderTotal = res.result.orderTotal;
      }
    })
  }
}
</script>
